<template>
   <div class="error_page">
     <ClientOnly>
         <template #fallback>
           <div class="border rounded bg-gray-50 flex items-center justify-center">
              <p>出错了，错误正在加载中....</p>
           </div>
         </template>
        <n-result  :status="error.statusCode+''" :title="error.statusCode==500?'服务器离开地球表面':error.statusMessage" description="生活总归带点荒谬">
        <template #footer>
            <nuxt-link to="/" v-if="error?.data?.model == 'note'"><n-button>返回课程</n-button></nuxt-link>
            <nuxt-link :to="'/special/detail/'+error.data.id" v-else-if="error?.data?.model == 'special'"><n-button>返回明细</n-button></nuxt-link>
            <n-button v-else @click="handleError">返回首页</n-button>
        </template>
        </n-result>
     </ClientOnly>
   </div>
</template>


<script setup>
import {NResult,NButton} from 'naive-ui'
const props = defineProps({
  error: Object
})

const handleError = () => {
   window.location.href = "/"
}
</script>

<style>
.error_page{height: 100vh;display: flex;justify-content: center;align-items: center;}
</style>
